<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>flex布局-direction</title>
	<style type="text/css">
	.flex-box{ display: flex; background-color: #ccc;}
	.flex-box .flex-item{ width: 50%; height: 60px; background-color: blue;}
	</style>
	<style type="text/css">
	.flex-box1{ flex-direction: row;}
	.flex-box2{ flex-direction: row-reverse;}
	.flex-box3{ flex-direction: column;}
	.flex-box4{ flex-direction: column-reverse;}
	</style>
</head>
<body>
	<div>注:flex-direction 是设置在父容器</div>
	<div>row（默认值）：主轴为水平方向，起点在左端</div>
	<div class="flex-box flex-box1">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>row-reverse:主轴为水平方向，起点在右端</div>
	<div class="flex-box flex-box2">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>column:主轴为垂直方向，起点在上沿</div>
	<div class="flex-box flex-box3">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	<div>column-reverse:主轴为垂直方向，起点在下沿</div>
	<div class="flex-box flex-box4">
		<div class="flex-item flex-item1">a1</div>
		<div class="flex-item flex-item2">b2</div>
		<div class="flex-item flex-item3">c3</div>
		<div class="flex-item flex-item4">d4</div>
	</div>
	
</body>
</html>